<template>
  <div style="margin: 15px" class="pay">
    <el-card>
      <div slot="header" style="margin: 0px 0px 5px 0px">
        <span style="display: flex; align-items: center; font-size: 18px">
          <img
            src="@/assets/img/txjl.png"
            style="width: 20px; margin-right: 5px"
          />
          {{headName}}打款记录</span
        >
      </div>
      <!-- 查询表单 -->
      <div style="margin: 20px 0px 0px -10px; padding-bottom: 15px">
        <el-form :inline="true" label-position="right" label-width="90px">
          <el-form-item label="提现时间">
            <el-date-picker
              v-model="CommissionData.field103"
              style="width: 200px; margin-right: 30px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              clearable
         
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
       
          <el-form-item label="预留手机号">
            <el-input
              v-model="CommissionData.mobile"
              placeholder="请输入预留手机号"
              :maxlength="11"
              show-word-limit
              clearable
              style="margin-right: 30px; width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户名称">
            <el-input
              v-model="CommissionData.field104"
              placeholder="请输入用户名称"
              :maxlength="30"
              clearable
              style="margin-right: 30px; width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item label="用户昵称">
            <el-input
              v-model="CommissionData.field106"
              placeholder="请输入用户昵称"
              :maxlength="30"
              clearable
              style="margin-right: 30px; width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item label="提现状态">
            <el-select
              v-model="CommissionData.field107"
              placeholder="请选择提现状态"
              clearable
              filterable
              style="margin-right: 30px; width: 200px"
            >
              <el-option
                v-for="(item, index) in field107Options"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="渠道名称">
            <el-input
              v-model="CommissionData.field108"
              placeholder="请输入渠道名称"
              :maxlength="30"
              clearable
              style="margin-right: 30px; width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item label="收款户名">
            <el-input
              v-model="CommissionData.field109"
              placeholder="请输入收款户名"
              :maxlength="30"
              clearable
              style="margin-right: 30px; width: 200px"
            ></el-input>
          </el-form-item>

          <el-form-item label="收款账户">
            <el-input
              v-model="CommissionData.field110"
              placeholder="请输入收款账户"
              :maxlength="30"
              clearable
              style="margin-right: 30px; width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input
              v-model="CommissionData.field111"
              placeholder="请输入身份证号"
              :maxlength="18"
              clearable
              style="margin-right: 30px; width: 200px"
            ></el-input>
          </el-form-item>

          <!-- <el-form-item label="" style="margin-left:110px">
             <el-button
              icon="el-icon-refresh"
              style="background: #eeeeee; color: #6396f4; font-weight: bold"
              @click="resetQuery"
              >重置
            </el-button>
            <el-button type="primary" icon="el-icon-search" @click="getList"
              >搜索</el-button
            >
          </el-form-item> -->
        </el-form>
        <div style="display: flex; justify-content: center">
          <el-button
            icon="el-icon-refresh"
            style="background: #eeeeee; color: #6396f4; font-weight: bold"
            @click="CommissionBottonForm"
            >重置
          </el-button>
          <el-button type="primary" icon="el-icon-search" @click="getData"
            >搜索</el-button
          >
        </div>
      </div>

      <el-divider></el-divider>
      <!-- 数据展示 -->
      <el-card style="height: 150px; margin-top: 10px">
        <div style="display: flex; height: 100%;justify-content:space-between;">
          <div class="pay-item">
            <div class="pay-value" style="color: red">
              <span>￥</span>
              {{ paramData.balance || 0 }}
            </div>
            <div class="pay-label">账户余额(元)</div>
          </div>
          <div class="pay-item">
            <div class="pay-value">
              <span>￥</span>
              {{ paramData.count|| 0 }}
            </div>
            <div class="pay-label">本月完成打款笔数</div>
          </div>
          <div class="pay-item">
            <div class="pay-value">
              <span>￥</span>
             {{paramData.totalMoney||0}}
            </div>
            <div class="pay-label">本月完成打款(元)</div>
          </div>

          <!-- <div class="pay-item">
            <div class="pay-value value-color">
              <span>￥</span>
              {{ remaining }}
            </div>
            <div class="pay-label">剩余未提现(元)</div>
          </div> -->
        </div>
      </el-card>
      <el-divider></el-divider>
      <!-- tab-表格 -->
      <div style="margin: 20px 0px">
        <div class="exportButton">
          <el-button
            icon="el-icon-upload2"
            @click="withdrawExport"
            style="margin-bottom: 10px; background: #f5f5f5"
            >导出</el-button
          >
        </div>
         <el-table :data="roleList" height="500">
              <el-table-column
                label="提现时间"
                prop="crashTime"
                align="center"
                width="150"
                
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.crashTime || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="用户名称" prop="userName" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.userName || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="用户昵称" prop="nickName" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.nickName || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="提现渠道"
                prop="withdrawalType"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span v-show="scope.row.withdrawalType == '0'">记账本</span>
                  <span v-show="scope.row.withdrawalType == '1'">银行卡</span>
                  <span v-show="scope.row.withdrawalType == '2'">支付宝</span>
                </template>
              </el-table-column>

              <el-table-column
                label="渠道名称"
                prop="channelName"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.channelName || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="提现金额/元"
                prop="amount"
                align="center"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="收款户名"
                prop="accountName"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.accountName || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="收款账户" prop="accountNo" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.accountNo || "暂无" }}</span>
                </template>
              </el-table-column>

              <el-table-column label="身份证号" prop="idCard" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.idCard || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="预留手机号" prop="phone" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.phone || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="提现状态" align="center" prop="withdrawalStatus">
                <!-- <template slot-scope="scope">
                  <span v-show="scope.row.withdrawalStatus == 'SUCCESS'"
                    >成功</span
                  >
                  <span v-show="scope.row.withdrawalStatus == 'fail'"
                    >失败</span
                  >
                  <span v-show="scope.row.withdrawalStatus == '转帐中'"
                    >转帐中</span
                  >
                </template> -->
              </el-table-column>
              <el-table-column
                label="提现信息"
                prop="callbackMessage"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.callbackMessage || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="手续费"
                prop="commissionAmount"
                align="center"
              />
              <el-table-column
                label="实际到账金额"
                prop="realityAmount"
                align="center"
              />
            </el-table>
      </div>
       <pagination
        :total="total"
        :page.sync="CommissionData.pageNum"
        :limit.sync="CommissionData.pageSize"
        @pagination="getData"
      />
    </el-card>
  </div>
</template>

<script>
import { selectCapWithdrawalRecordList } from "@/api/finance/index.js";
export default {
  data() {
    return {
      //标题名称
      headName:"",
        pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      total:0,
      //本页面的ID数据
      paramData: {
        balance: "",  //账户余额
        count: "",   //本月打款笔数
        id: "",   
        name: "",  //名称
        totalMoney: "", //本月完成打款
      },
      //列表数据
      roleList:[],
      //搜索
      CommissionData: {
        pageSize:10,
        pageNum:1,
        field103: [],
        field105: undefined,
        mobile: "",
        field104: undefined,
        field106: undefined,
        field107: undefined,
        field108: undefined,
        field109: undefined,
        field110: undefined,
        field111: undefined,
        field101: undefined,
      },
      CommissionRules: {
        field103: [],
        field105: [],
        mobile: [
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: "手机号格式错误",
            trigger: "blur",
          },
        ],
        field104: [],
        field106: [],
        field107: [],
        field108: [],
        field109: [],
        field110: [],
        field111: [
          {
            pattern:
              /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "身份证格式错误",
            trigger: "blur",
          },
        ],
        field101: [],
      },
      field105Options: [
        {
          label: "支付宝",
          value: 0,
        },
        {
          label: "银行卡",
          value: 1,
        },
        {
          label: "其他",
          value: 2,
        },
      ],
      field107Options: [
        {
          label: "成功",
          value: 'SUCCESS',
        },
        {
          label: "失败",
          value: 'FAIL',
        },
        // {
        //   label: "转账中",
        //   value:"转账中",
        // },
      ],
      field101Options: [
        {
          label: "支付宝",
          value: 0,
        },
        {
          label: "银行卡",
          value: 1,
        },
        {
          label: "其他",
          value: 2,
        },
      ],

      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      value: "",
      options: [{ label: "label", value: "1" }],
      options1: [{ label: "银行卡", value: "1" }],
      showTan2: false,
      tableData: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      form: {},
      form1: {},
      activeName: "Commission",
      activeName1: "first1",
    };
  },
  created() {
    this.getData();
    this.headName=this.$route.query.name;
  },
  methods: {
   async getData() {
       console.log(this.CommissionData.pageNum,'第一页')
        console.log(this.CommissionData.pageSize,'10条一页')
      //获取这个页面自己的ID信息
      this.paramData = JSON.parse(sessionStorage.getItem("row"));

      let param={
         beginDate:this.CommissionData.field103[0],  //"开始时间"
          endDate:this.CommissionData.field103[1],  //"结果时间"
     
          phone:this.CommissionData.mobile,  //"手机号"
          withdrawalStatus:this.CommissionData.field107,  //"提现状态"
           userName:this.CommissionData.field104,  //"用户名称"
           nickName: this.CommissionData.field106, //"用户昵称"
           channelName:this.CommissionData.field108,  //"渠道名称"
           accountName:this.CommissionData.field109,  //"收款户名"
            accountNo: this.CommissionData.field110,  //"收款账户"
            idCard:this.CommissionData.field111,  //"身份证号"




          channelId: this.paramData.id,
           withdrawalType: this.paramData.channelId, //0记账本 1银联  2支付宝
          pageNum:this.CommissionData.pageNum,
          pageSize:this.CommissionData.pageSize,
      }
     const dataList=await selectCapWithdrawalRecordList(param)
     if(dataList.code==200){
           this.roleList=dataList.data.list;
      this.total=dataList.data.total;
     }
      console.log(dataList,'获取列表')
  
    },
    //搜索按钮
    CommissionBotton() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
            console.log(this.CommissionData,'搜索按钮');
            
            
            
           
            
            
           
            
            
            
            
            this.CommissionData.field101;  //"失败原因"
            this.CommissionData.pageNum; 
            this.CommissionData.pageSize;  

        };
        // {
        //   beginDate:this.CommissionData.field103[0],  //"开始时间"
        //   endDate:this.CommissionData.field103[1],  //"结果时间"
        //   withdrawalType:this.CommissionData.field105,  //"提现渠道"
        //   phone:this.CommissionData.mobile,  //"手机号"
        //   withdrawalStatus:this.CommissionData.field107,  //"提现状态"
        //    userName:this.CommissionData.field104,  //"用户名称"
        //    nickName: this.CommissionData.field106, //"用户昵称"
        //    channelName:this.CommissionData.field108,  //"渠道名称"
        //    accountName:this.CommissionData.field109,  //"收款户名"
        //     accountNo: this.CommissionData.field110,  //"收款账户"
        //     idCard:this.CommissionData.field111,  //"身份证号"

        // }
        
        // TODO 提交表单
      });
    },
    CommissionBottonForm() {
      this.$refs["elForm"].resetFields();
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped>
.exportButton {
  /* border: 1px red solid; */
  display: flex;
  justify-content: flex-end;
}
.el-form-item__label {
  font-weight: 500;
}
</style>
<style>
.pay .el-date-editor .el-range-separator {
  width: 15%;
}

.pay .el-card__body {
  height: 100%;
}

.pay .pay-item {
  width: 45%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pay .pay-item:not(:last-child) {
  border-right: 1px solid #f0f0f0;
}

.pay .pay-item .pay-value {
  font-size: 24px;
  font-weight: bold;
}

.pay .pay-item .pay-value span {
  font-size: 10px;
  margin-right: -5px;
}

.pay .pay-item .value-color {
  color: #3a77f6;
}

.pay .pay-item .pay-label {
  font-size: 11px;
  margin-top: 10px;
}

.pay .el-divider--horizontal {
  background: #f0f0f0;
}

.pay .el-card__header {
  margin: 0 20px;
  padding-left: 0px;
}

.pay .el-tabs__nav-wrap::after {
  height: 0;
}
</style>
